<template>
	<view>
		<image src="../../static/imags/login/bg.png" class="bgimg"></image>
		<view :style="{'width':'100%','height':height}"></view>
		<view class="toptitle">
			<view class="iconview" @tap="gomine">
				<image src="../../static/imags/index/jb.png" class="jbimg"></image>
				<view class="box">{{user.coin}}</view>
			</view>
			
			<view class="iconview iconviewhb" @tap="gomine">
				<image src="../../static/imags/index/hb.png" class="jbimg1"></image>
				<view class="box">{{user.fen}}元</view>
			</view>
			
			<view class="iconright" @tap="toshare" style="margin-left: 10rpx;">
				<image src="../../static/imags/index/unishare.png"></image>
			</view>
			
			<view class="iconright" @tap="howplay">
				<image src="../../static/imags/index/zmw.png"></image>
			</view>
			
			<view class="iconright" style="margin-right:10rpx;" @tap="hongbaodialog=!hongbaodialog">
				<image src="../../static/imags/index/chb.png"></image>
				<view class="hongbaonum">{{canlingqu}}</view>
			</view>
		</view>
		<view :class="hongbaodialog?'centerbox centerbox1':'centerbox'">
			<view class="top" v-if="!hongbaodialog">
				<view class="wenzi">
					第
					<span>{{user.index}}</span>
					首
				</view>
				<view class="wenzi" style="float: right;">
					猜对歌曲数: 
					<span>{{user.leijicaiduigequ}}</span>
				</view>
			</view>
			<view class="videoimg" v-if="!hongbaodialog"><player @change="audioPlayFn"/></view>
			<!-- <image src="../../static/imags/index/ddj.png" class="videoimg" v-if="!hongbaodialog"></image> -->
			<view style="width: 100%;height: 386rpx;" v-if="!hongbaodialog"></view>
			<view class="hongbaobox" v-if="hongbaodialog">
				<view class="hongbao" v-for="(item,index) in hblist" :key="index" @tap="linghongbao(item)">
					<span>{{item.chai}}</span>
				</view>
			</view>
			
			
			<view class="caiduige">
				<view class="wenzi">继续猜对<span>{{user.tixiancaidui>allsong?1:allsong-user.tixiancaidui}}</span>首歌，可再次<span>现金抽奖</span>哦</view>
				<image src="../../static/imags/index/hb.png"></image>
			</view>
			
			<view class="caiduige">
				<view class="progress">
					<view class="progressbar" :style="{width: (user.tixiancaidui>allsong?(1/allsong*504):(user.tixiancaidui/allsong*504)) + 'rpx'}"></view>
				</view>
				<view class="jindu">
					<span>{{user.tixiancaidui}}/</span>{{allsong}}
				</view>
			</view>
		</view>
        
        <view style="width: 100%;height: 9rpx;" v-if="!hongbaodialog"></view>
		<view class="miaoshu">
            <image src="../../static/imags/index/caige.png"></image>
        </view>
		
		<view class="buttonbox">
			<view class="button" @tap="dati(1)">{{songinfo.daan1}}</view>
		</view>
        
        <view class="buttonbox">
        	<view class="button" @tap="dati(2)">{{songinfo.daan2}}</view>
        </view>
        
        <view class="buttonbox">
        	<view class="button" @tap="dati(3)">{{songinfo.daan3}}</view>
        </view>
        
        <uni-popup ref="popup" :maskClick="false">
        	<view class="huodemoney">
        		<view class="close" @tap="closepopup"></view>
        		<view style="width: 100%;height: 200rpx;"></view>
        		<view class="title" style="font-size: 30rpx;">当前已连对<span>{{user.leijiliandui}}</span>首，获得连对奖励<span>{{hongbao}}</span>元</view>
        		<view style="width: 100%;height: 60rpx;"></view>
        		<view class="title1">距离下次现金抽奖，</br>还差<span style="color: #F95300;">{{user.tixiancaidui>allsong?1:allsong-user.tixiancaidui}}</span>首歌曲</view>
        		<view style="width: 100%;height: 60rpx;"></view>
        		<view class="button button1" @tap="closepopup"></view>
        	</view>
        </uni-popup>
        
        <uni-popup ref="huodetixian" :maskClick="false">
        	<view class="huodemoney">
        		<view class="close" @tap="closehuodetixian"></view>
        		<view style="width: 100%;height: 200rpx;"></view>
        		<view class="title">恭喜你获得一次现金抽奖机会</view>
        		<view style="width: 100%;height: 60rpx;"></view>
        		<view class="title1" style="font-size: 30rpx;">当前账户余额:<span style="color: #F95300;">{{user.fen}}</span>元</view>
        		<view style="width: 100%;height: 80rpx;"></view>
        		<view class="button" @tap="gomine">
                    立即抽奖
                </view>
        	</view>
        </uni-popup>
        
        <uni-popup ref="caigepopup" :maskClick="false">
        	<view class="caigepopup" v-if="!caigejieguo">
        		<view style="width: 100%;height: 200rpx;"></view>
        		<view class="img img1"></view>
        		<view style="width: 100%;height: 20rpx;"></view>
        		<view class="title1 title">{{'继续猜对'+(user.tixiancaidui>allsong?1:allsong-user.tixiancaidui)+'首歌曲，可以现金抽奖哦'}}</view>
        		<view style="width: 100%;height: 100rpx;"></view>
                <!-- <view class="buttonimg buttonimg1" v-if="caigejieguo" @tap="showAd(1)">
                    看视频获得{{videofanbei.min}}-{{videofanbei.max}}倍奖励
                </view> -->
        		<image src="../../static/imags/index/btn2.png" class="buttonimg"  @tap="showAd(2)"></image>
        		<view style="width: 100%;height: 30rpx;"></view>
        		<view class="tishi" @tap="closecaigepopup">{{time>0?time+'s':'下一首，继续赚钱'}}</view>
        	</view>
            
            <view class="caigepopup" v-if="caigejieguo">
                <view style="width: 100%;height: 200rpx;"></view>
                <view class="liandui">
                    <image src="../../static/imags/index/liandui.png" style="width: 260rpx;height: 260rpx;"></image>
                    <view class="num">x{{user.leijiliandui}}</view>
                </view>
                <view style="width: 100%;height: 20rpx;"></view>
                <view class="title">{{'+'+hongbao}}<span style="font-size: 31rpx;">金币</span></view>
                <view style="width: 100%;height: 40rpx;"></view>
                <view class="title1 title">{{'继续猜对'+(lianduijiangli.song-user.liandui)+'首歌曲，最高可得'+lianduijiangli.fen+'元现金奖励'}}</view>
                <view style="width: 100%;height: 100rpx;"></view>
                <view class="buttonimg buttonimg1" @tap="showAd(1)">
                    看视频获得{{videofanbei.min}}-{{videofanbei.max}}倍奖励
                </view>
                <view style="width: 100%;height: 30rpx;"></view>
                <view class="tishi" @tap="closecaigepopup">{{time>0?time+'s':'下一首，继续赚钱'}}</view>
            </view>
        </uni-popup>
        
        
		<!-- 未接 -->
		
		<view class="videodialog" v-if="videodialog">
			<image src="../../static/imags/index/hbs.png" class="hbs"></image>
			<view class="title">看视频辛苦啦</view>
			<view class="title1">获得翻倍奖励1.73元</view>
		</view>
        
		<uni-popup ref="hongbaopopup" :maskClick="false">
			<view class="hongbaopopup">
				<view style="width: 100%;height: 120rpx;"></view>
				<view class="img"></view>
				<view class="coin">+{{hongbaocoin}}金币</view>
				<view style="width: 100%;height: 40rpx;"></view>
                <view class="buttonimg buttonimg1" @tap="showAd(3)">
                    看视频获得{{videofanbei.min}}-{{videofanbei.max}}倍奖励
                </view> 
				<!-- <image src="../../static/imags/index/but1.png" class="buttonimg" @tap="showAd(3)"></image> -->
				<view style="width: 100%;height: 30rpx;"></view>
				<view class="close-box">
					<view class="tishi" v-if="time>0">{{time}}</view>
					<image src="../../static/imags/index/gb.png" class="close" v-else @tap="closehongbaopopup"></image>
				</view>
				<view style="width: 100%;height: 10rpx;"></view>
				<view class="bannervideo">
					<ad :adpid="adpid" @load="onload" @close="onclose" @error="onerror"></ad>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export { default } from "./index.js";
</script>

<style>
	@import url("./index.css");
</style>
